<div class="devui-tags" #tagsElement>
  <d-tag
    #tagElement
    *ngFor="let tag of hideBeyondTags ? showTags : tags; let index = index"
    [tag]="displayProperty ? tag[displayProperty] : tag"
    [mode]="mode"
    [size]="size"
    [deletable]="deletable"
    [checked]="tag['checked']"
    [labelStyle]="tag['labelStyle']"
    [customColor]="tag['customColor']"
    [titleContent]="titleProperty ? tag[titleProperty] : displayProperty ? tag[displayProperty] : tag"
    [customViewTemplate]="customViewTemplate"
    [beforeDelete]="beforeDelete"
    (tagDelete)="removeTag($event, tag, index)"
    (checkedChange)="tagChecked($event, tag, index)"
  >
  </d-tag>
  <d-tag
    class="show-more-tag"
    *ngIf="hideBeyondTags && showMore"
    dPopover
    [content]="beyondTagsTpl"
    [controlled]="true"
    [trigger]="'hover'"
    [tag]="'+ ' + beyondTags.length"
    [mode]="'checkable'"
    [size]="size"
    [popoverStyle]="{ backgroundColor: 'var(--devui-base-bg)' }"
  ></d-tag>
  <div #suffixElement class="devui-tags-suffix">
    <ng-content select="[suffix]"></ng-content>
  </div>
</div>

<ng-template #beyondTagsTpl>
  <div class="beyond-tags-wrapper">
    <d-tag
      class="beyond-tag-style"
      *ngFor="let tag of beyondTags; let index = index"
      [tag]="displayProperty ? tag[displayProperty] : tag"
      [mode]="mode"
      [size]="size"
      [deletable]="deletable"
      [checked]="tag['checked']"
      [labelStyle]="tag['labelStyle']"
      [customColor]="tag['customColor']"
      [titleContent]="titleProperty ? tag[titleProperty] : displayProperty ? tag[displayProperty] : tag"
      [customViewTemplate]="customViewTemplate"
      [beforeDelete]="beforeDelete"
      (tagDelete)="removeTag($event, tag, index)"
      (checkedChange)="tagChecked($event, tag, index)"
    >
    </d-tag>
  </div>
</ng-template>
